<template>
    <table class="table table-bordered table-hover table-striped table-center table-sm text-center w-full">
        <thead>
        <tr>
            <th>表情图片</th>
            <th>字符串代码</th>
            <th>替换关键字</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/1.png"></td>
            <td>/::)</td>
            <td>[微笑]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" style="height: 25px" src="@/assets/imgs/em/2.png"></td>
            <td>/::~</td>
            <td>[撇嘴]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/3.png"></td>
            <td>/::B</td>
            <td>[色]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/4.png"></td>
            <td>/::|</td>
            <td>[发呆]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/5.png"></td>
            <td>/:8-)</td>
            <td>[得意]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/6.png"></td>
            <td>/::&lt;</td>
            <td>[流泪]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/7.png"></td>
            <td>/::$</td>
            <td>[害羞]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/8.png"></td>
            <td>/::X</td>
            <td>[闭嘴]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/9.png"></td>
            <td>/::Z</td>
            <td>[睡]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/10.png"></td>
            <td>/::’(</td>
            <td>[大哭]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/11.png"></td>
            <td>/::-|</td>
            <td>[尴尬]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/12.png"></td>
            <td>/::@</td>
            <td>[发怒]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/13.png"></td>
            <td>/::P</td>
            <td>[调皮]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/14.png"></td>
            <td>/::D</td>
            <td>[呲牙]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/15.png"></td>
            <td>/::O</td>
            <td>[惊讶]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/16.png"></td>
            <td>/::(</td>
            <td>[难过]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/17.png"></td>
            <td>/::+</td>
            <td>[酷]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/18.png"></td>
            <td>/:–b</td>
            <td>[冷汗]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/19.png"></td>
            <td>/::Q</td>
            <td>[抓狂]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/20.png"></td>
            <td>/::T</td>
            <td>[吐]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/21.png"></td>
            <td>/:,@P</td>
            <td>[偷笑]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/22.png"></td>
            <td>/:,@-D</td>
            <td>[愉快]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/23.png"></td>
            <td>/::d</td>
            <td>[白眼]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/24.png"></td>
            <td>/:,@o</td>
            <td>[傲慢]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/25.png"></td>
            <td>/::g</td>
            <td>[饥饿]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/26.png"></td>
            <td>/:|-)</td>
            <td>[困]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/27.png"></td>
            <td>/::!</td>
            <td>[惊恐]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/28.png"></td>
            <td>/::L</td>
            <td>[流汗]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/29.png"></td>
            <td>/::&gt;</td>
            <td>[憨笑]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/30.png"></td>
            <td>/::,@</td>
            <td>[悠闲]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/31.png"></td>
            <td>/:,@f</td>
            <td>[奋斗]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/32.png"></td>
            <td>/::-S</td>
            <td>[咒骂]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/33.png"></td>
            <td>/:?</td>
            <td>[疑问]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/34.png"></td>
            <td>/:,@x</td>
            <td>[嘘]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/35.png"></td>
            <td>/:,@@</td>
            <td>[晕]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/36.png"></td>
            <td>/::8</td>
            <td>[疯了]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/37.png"></td>
            <td>/:,@!</td>
            <td>[哀]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/38.png"></td>
            <td>/:!!!</td>
            <td>[骷髅]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/39.png"></td>
            <td>/:xx</td>
            <td>[敲打]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/40.png"></td>
            <td>/:bye</td>
            <td>[再见]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/41.png"></td>
            <td>/:wipe</td>
            <td>[擦汗]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/42.png"></td>
            <td>/:dig</td>
            <td>[抠鼻]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/43.png"></td>
            <td>/:handclap</td>
            <td>[鼓掌]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/44.png"></td>
            <td>/:&amp;-(</td>
            <td>[糗大了]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/45.png"></td>
            <td>/:B-)</td>
            <td>[坏笑]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/46.png"></td>
            <td>/:&lt;@</td>
            <td>[左哼哼]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/47.png"></td>
            <td>/:@&gt;</td>
            <td>[右哼哼]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/48.png"></td>
            <td>/::-O</td>
            <td>[哈欠]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/49.png"></td>
            <td>/:&gt;-|</td>
            <td>[鄙视]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/50.png"></td>
            <td>/:P-(</td>
            <td>[委屈]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/51.png"></td>
            <td>/::’|</td>
            <td>[快哭]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/52.png"></td>
            <td>/:X-)</td>
            <td>[阴险]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/53.png"></td>
            <td>/::*</td>
            <td>[亲亲]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/54.png"></td>
            <td>/:@x</td>
            <td>[吓]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/55.png"></td>
            <td>/:8*</td>
            <td>[可怜]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/56.png"></td>
            <td>/:pd</td>
            <td>[菜刀]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/57.png"></td>
            <td>/:&lt;W&gt;</td>
            <td>[西瓜]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/58.png"></td>
            <td>/:beer</td>
            <td>[啤酒]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/59.png"></td>
            <td>/:basketb</td>
            <td>[篮球]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/60.png"></td>
            <td>/:oo</td>
            <td>[乒乓]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/61.png"></td>
            <td>/:coffee</td>
            <td>[咖啡]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/62.png"></td>
            <td>/:eat</td>
            <td>[饭]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/63.png"></td>
            <td>/:pig</td>
            <td>[猪头]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/64.png"></td>
            <td>/:rose</td>
            <td>[玫瑰]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/65.png"></td>
            <td>/:fade</td>
            <td>[凋谢]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/66.png"></td>
            <td>/:showlove</td>
            <td>[嘴唇]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/67.png"></td>
            <td>/:heart</td>
            <td>[爱心]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/68.png"></td>
            <td>/:break</td>
            <td>[心碎]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/69.png"></td>
            <td>/:cake</td>
            <td>[蛋糕]</td>
        </tr>
        <tr>
            <td class="flex justify-center"><img alt="" src="@/assets/imgs/em/70.png"></td>
            <td>/:li</td>
            <td>[闪电]</td>
        </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">

</script>

<style scoped>
.table.table-center {
    text-align: center !important;
}
td {
    border: 1px solid #dee2e6;
    padding: 6px 0;

}
tr:nth-child(odd) {
    background-color: #f2f2f2;
}
tr:hover {
    background-color: #f2f2f2;
}
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}
.table {
    border-collapse: collapse;
}
</style>